<template>
	<div class="feedback-list">
		<div class="form-box">
			<a-input-search class="ipt"
				size="large"
	      v-model:value="title"
	      placeholder="请输入反馈标题"
	      enter-button
	      allowClear
	      @search="onSearch"/>
		</div>
	  <div class="feed-back-list">
	  	<div v-if="props.list.length" class="list">
	  		<a-card class="item" v-for="(item, index) in props.list" :key="index" 
	  			:title="item.type+'：'+item.title"
	  			size="small"
	  			@click="showDetail(item)">
	  			<template #extra>
	  				<span class="state">已解决</span>
	  			</template>
		      {{item.description}}
		    </a-card>
			</div>
	  </div>
	  <div class="paging-box">
	  	<a-pagination 
	  		v-model:current="props.paging.current" 
	  		v-model:pageSize="props.paging.pageSize"
	  		:total="props.paging.total"
	  		:showSizeChanger="props.paging.showSizeChanger"
	  		:showTotal="props.paging.showTotal"
	  		@change="props.paging.onChange"/>
	  </div>
	</div>
</template>

<script setup>
	import { reactive, ref, computed, onMounted } from 'vue'

	const emit = defineEmits(['update:title', 'load', 'choice']);

	const props = defineProps({
		title: {
			type: String
		},
		list: {
			type: Array
		},
		paging: {
			type: Object
		},
	})

	const title = computed({
		get: () => {
			return props.title;
		},
		set: value => {
			emit('update:title', value);
		}
	})

	const _d = reactive({

	})

	onMounted(() => {
	})

	function showDetail(data) {
		emit('choice', data);
	}

	function onSearch() {
		emit('load');
	}

</script>

<style lang="less" scoped>
.feedback-list {
	padding: 54px 0 29px;
	height: 100%;
}
.form-box {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.paging-box {
	position: absolute;
	bottom: -24px;
	left: -24px;
	right: -24px;
	text-align: right;
	padding: 10px 24px;
	border-top: 1px solid #F0F0F0;
}
.feed-back-list {
	height: 100%;
	overflow: auto;
	.list {
		.item {
			width: 100%;
			box-shadow: 0 0 10px rgba(0,0,0,0.1);
			&:not(:last-child) {
				margin-bottom: 20px;
			}
			.state {
				padding: 2px 5px;
				background: #52c41a;
				color: #fff;
				border-radius: 8px;
				font-size: 12px;
			}
		}
	}
}
</style>